<template>
  <div>
    <el-space direction="vertical" style="display: flex; align-items: normal">
      <div style="display: flex; justify-content: space-between">
        <el-space>
          <el-button type="default" @click="refresh">刷新</el-button>
          <el-button type="primary" @click="$refs.opRef.open()">新增</el-button>
          <el-button
            type="danger"
            :disabled="checkedIds.length === 0"
            @click="handleDelete(checkedIds)"
          >
            删除
          </el-button>
        </el-space>

        <el-space>
          <el-input placeholder="请输入关键字" />
          <el-button type="primary">搜索</el-button>
        </el-space>
      </div>

      <div style="width: 100%">
        <el-table
          v-loading="loading"
          ref="tableRef"
          stripe
          border
          :data="list"
          @selection-change="onSelect"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="label" label="标识" width="180" />
          <el-table-column prop="remark" label="备注" width="180" />
          <el-table-column prop="createTime" label="创建时间" width="180" />
          <el-table-column prop="updateTime" label="更新时间" width="180" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-space>
                <el-button @click="$refs.opRef.open(row)">编辑</el-button>
                <!-- 气泡确认框 -->
                <el-popconfirm
                  title="你确定要删除吗"
                  @confirm="handleDelete([row.id])"
                >
                  <template #reference>
                    <el-button>删除</el-button>
                  </template>
                </el-popconfirm>
              </el-space>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="display: flex; justify-content: flex-end">
        <el-pagination
          v-model:current-page="params.page"
          v-model:page-size="params.size"
          :total="total"
          :page-sizes="[2, 4, 6, 8, 10]"
          background
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </el-space>

    <button @click="fn1">勾选上开发</button>

    <OpDialog ref="opRef" @success="refresh" />
  </div>
</template>

<script>
import { getRoleList, deleteRole } from "@/api/system";
import OpDialog from "./components/op-dialog.vue";

export default {
  name: "Role",

  components: {
    OpDialog,
  },

  data() {
    return {
      // 请求参数
      params: {
        page: 1, // 页码
        size: 10, // 每页显示条数
        order: "id", // 排序字段
        sort: "asc", // 排序规则: asc - 正序 desc - 倒序
      },
      // 表格的数据
      list: [],
      // 数据总条数
      total: 1,
      // 数据请求中
      loading: false,
      // 当前勾选的数据Id集合
      checkedIds: [],
    };
  },

  watch: {
    params: {
      handler() {
        this.refresh();
      },
      deep: true,
    },
  },

  methods: {
    async refresh() {
      try {
        this.loading = true;
        const { list, pagination } = await getRoleList(this.params);
        this.list = list;
        this.total = pagination.total;
      } finally {
        this.loading = false;
      }
    },

    /**
     * 表格组件勾选时触发的事件
     *    selection - 当前勾选的数据数组
     */
    onSelect(selection, row) {
      console.log("onSelect selection", selection);
      // 将 selection 中的数据映射出 id 赋值给 checkedIds
      this.checkedIds = selection.map((item) => item.id);
    },

    /**
     * 删除功能
     */
    async handleDelete(ids) {
      await deleteRole({ ids });
      // 刷新数据
      this.refresh();
    },

    fn1() {
      const that = this.$refs.tableRef;
      console.log(that);
      that.toggleRowSelection(this.list[0], true);
    },
  },

  created() {
    this.refresh();
  },
};
</script>
